import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import {Route,NavLink,withRouter} from 'react-router-dom'
import {withRouter} from 'react-router-dom'
import { AppOutline,UserOutline,AppstoreOutline} from 'antd-mobile-icons'
import '../styles/Tabbar.scss'
class Tabbar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tabbar: [
                {
                    key: '/index/home',
                    title: '首页',
                    icon: <AppOutline />,
                },
                {
                    key: '/index/service',
                    title: '服务',
                    icon: <AppstoreOutline />,
                },
                {
                    key: '/index/my',
                    title: '我的',
                    icon: <UserOutline />,
                },
            ]
        }
    }

    // 跳转路由
    luyouClick(key){
        this.props.history.push(key)
    }

    render() {
        // console.log('tabbar',this.props);
        return (
            <div className='Tabbar'>
                  <TabBar className='tabbar' onChange={(key)=>{this.luyouClick(key)}}>
                      {this.state.tabbar.map(item => (
                          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                      ))}
                  </TabBar>
            </div>
        );
    }
}

// 自带高阶组件withRouter   可自己定义
// function mywithRouter(Jing){
//     return class extends Component {
//         render() {
//             return (
//                 <Route Component={Jing} />
//             )
//         }
//     }
// }

// export default Tabbar;
export default withRouter(Tabbar);